<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title> 无缝滚动 </title>
      <style>
            body{                                                                                                           
            margin: 0px;
            padding:0px;
            background: #ebebeb;
            }
           #demo1{
            width:300px;
            height:250px;
            border: 1px solid gray;
            position: absolute;
            top:100px;
            left:500px;
            overflow:hidden;
           }
           #demo2{
            width:2400px;
            height:240px;
            border: 1px solid gray;
            position: relative;
            top:5px;
            left:0px;
           }
           img{
            width:300px;
            height:240px;
            float:left;
           }
           a{
            cursor: pointer;
           }
        </style>
    </head>
    <body>
      <input type="button" id="bt1" name="bt1" value="左" onclick="you()">
      <input type="button" id="bt2" name="bt2" value="右" onclick="zuo()">
       <div id="demo1">
          <a>
           <div id="demo2">
               <img src="./img/2.jpg" id="im">
               <img src="./img/3.jpg">
               <img src="./img/4.jpg">
               <img src="./img/11.jpg">
               <!-- 复制一份是为了减少晃动  -->
               <img src="./img/2.jpg">
               <img src="./img/3.jpg">
               <img src="./img/4.jpg">
               <img src="./img/11.jpg">
           </div>
           </a>
       </div>
    </body>
    <script>  
       window.onload = function(){
        var odiv1 = document.getElementById('demo1');
        var odiv2 = document.getElementById('demo2');
        var btu1 = document.getElementById('bt1');
        var btu2 = document.getElementById('bt2');
        var img1 = document.getElementById('im');
        var w = img1.offsetWidth;
        var speed = 2;
    
        function move(){     //控制移动的函数
        if(demo2.offsetLeft<-(demo2.offsetWidth/2)){
        demo2.style.left = '0'+'px';
        }
         if(demo2.offsetLeft>0){
        demo2.style.left =  -w*4+ 'px';
        }
        demo2.style.left = demo2.offsetLeft - speed +'px';  
        }


         btu1.addEventListener('click',function(){  //给btu1添加事件 
          speed = 2;},false);
         btu2.addEventListener('click',function(){    //给btu2添加事件 
          speed = -2;},false);
     
       /**/ <!---->
        var mouse = setInterval(move,10);

        odiv2.onmouseover = function(){   //鼠标移入清除定时器
        clearInterval(mouse);}
        odiv2.onmouseout = function(){   //鼠标移出正常运行
         mouse=setInterval(move,10);}

        };
    </script>
</html>